<template>
  <ul class="k-tabs" >
    <li  class="tabs-item"  @mouseenter="clickTabItem(index)" @click="clickTabItem(index)" :class="{active:currentIndex===index}" v-for="(item,index) in list" :key="index">
      {{item?.name||item}}
    </li>
  </ul>
</template>

<script>
export default {
  name: "k-tabs",
  props:{
    list:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  methods:{
    clickTabItem(index){
      if(this.currentIndex===index)return
      this.currentIndex=index
      this.$emit('change',index)
    }
  }
};
</script>

<style scoped lang="scss">
.k-tabs{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  .tabs-item{
    width: 175px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-weight: bold;
    border-radius: 33px;
    background: #FFFFFF;
    box-shadow: 2px 4px 6px 5px rgba(188,188,188,0.25);
    font-size: 20px;
    cursor: pointer;
    &.active{
      background: #015293;
      color: #FFFFFF;
      font-weight: bold;
    }
  }

}
</style>
